<template>
  <div class="cms-views-container contact-service-pages">
    <header class="w-full h-10 px-4 leading-10 text-center">
      <span class="float-left">图标</span>
      <span class="text-base text-[#333] font-medium">联系客服</span>
    </header>
    <div class="px-4 mt-4">
      <p class="mb-4 text-center text-[#c2c2c2] text-[11px]">2022-04-24 16:34</p>
      <div class="flex mb-4">
        <img
          src="https://img2.baidu.com/it/u=343850545,2320437498&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
          class="w-9 h-9"
          style="border-radius: 50%"
        />
        <div class="ml-2 text-content bg-[#F7F7F7] rounded p-[10px]">
          您好，我是您的专属客服，很高心为您服务！请问有什么可以帮您？
        </div>
      </div>
      <p class="mb-4 text-center text-[#c2c2c2] text-[11px]">2022-04-24 16:34</p>
      <div class="flex justify-end mb-4">
        <div class="mr-2 text-content bg-[#F7F7F7] rounded p-[10px]">请问vip费用怎么算的？</div>
        <img
          src="https://img2.baidu.com/it/u=939903330,3137313886&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=384"
          alt=""
          class="w-9 h-9"
          style="border-radius: 50%"
        />
      </div>
      <div class="flex mb-4">
        <img
          src="https://img2.baidu.com/it/u=343850545,2320437498&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
          class="w-9 h-9"
          style="border-radius: 50%"
        />
        <div class="ml-2 text-content bg-[#F7F7F7] rounded p-[10px] flex flex-col w-full">
          <span> 当前VIP费用按照金币结算</span>
          <span>月卡：20金币</span>
          <span>季卡：50金币</span>
          <span>半年卡：90金币</span>
        </div>
      </div>
      <div class="absolute bottom-0 left-0 right-0 flex items-center justify-between px-4 h-14">
        <span class="w-[247px] bg-[#f7f7f7] rounded h-9 leading-9 text-[#c2c2c2] text-sm pl-[10px]"
          >请输入您的问题</span
        >
        <span>图标</span>
        <span>图标</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.contact-service-pages {
}
</style>
